<template>
    <div>
        <van-nav-bar title="车辆" left-arrow @click-left="onClickLeft" fixed/>
        <van-empty description="您还没有添加车辆哦" v-show="!list.length">
        </van-empty>
        <div class="list-box">
            <div v-for="item in list" :key="item.car_id" class="box">
                <div class="flex-sp-center">
                    <span :class="item.car_type === 'BLUE' ? 'number' : item.car_type === 'YELLOW' ? 'yellow' :'green'">{{item.car_number}}</span>
                    <span :class="item.black_id ? 'red' : 'ok'">{{item.status ? '可使用' : '不可使用'}}</span>
                </div>
            </div>
        </div>
        <div class="btn-box">
            <van-button round  type="primary" class="bottom-button" icon="plus" @click="$router.push('addCar')">添加车辆</van-button>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
export default {

    data() { 
        return { 
            list: [],
            options: [],
        }
    },
    methods: { 
        onClickLeft() {
            this.$router.go(-1);
        },

        async getList() { 
            try { 
                const { data : res } = await this.$api.Car.getUserCarList({ 
                    userId: localStorage.userid
                })
                if(res.code) return Toast(res.msg)
                this.list = res.result
            }catch(e) { 
                console.log(e);
            }
        },
    },
    mounted(){
        this.getList()
    }
}
</script>

<style lang="scss" scoped>
.bottom-button{ 
    border: #2d8cf0;
    background: #2d8cf0;
}
.btn-box{
    display: flex;
    justify-content: center;
    align-content: center;
}
.btn{
    background: #2d8cf0;
    border: #2d8cf0;
}
.list-box{ 
    padding: 20px;
    margin-top: 30px;
    .box{
        border: 1px solid #eee;
        background: #fff;
        border-radius: 16px;
        margin-top: 15px;
        display: flex;
        font-size: 16px;
        padding: 20px;
        align-items: center;
        .number{ 
            color: #2d8cf0;
        }
        .yellow{ 
            color: rgb(223, 223, 135);
        }
        .red{ 
            color: rgb(226, 87, 87);
        }
        .green{ 
            color: green;
        }
    }
}
.flex-sp-center{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

}
.flex{ 
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>